<template>
  <div class="app-container">
    <el-form ref="form" :model="InterfaceAddFrom" :rules="rules" label-width="120px">
      <el-form-item label="接口名称:" prop="interfaceName">
            <el-input v-model="InterfaceAddFrom.interfaceName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="参数类型:" prop="parameterType">
              <el-select v-model="InterfaceAddFrom.parameterType" clearable placeholder="请选择">
                <el-option
                  v-for="item in parameterType"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="请求方式:" prop="requsetMethod">
            <el-select v-model="InterfaceAddFrom.requsetMethod" clearable placeholder="请选择">
              <el-option
                v-for="item in requsetMethod"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请求路径:" prop="requestPath">
            <el-input v-model="InterfaceAddFrom.requestPath" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="测试环境:" prop="testingEnvironment">
            <el-select v-model="InterfaceAddFrom.testingEnvironment" filterable placeholder="请选择">
              <el-option
                v-for="item in testEnvironmentSelectList"
                :key="item.datasourceId"
                :label="item.apiname"
                :value="item.datasourceId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否URL传参:" prop="urlParameterTransfer">
            <el-select v-model="InterfaceAddFrom.urlParameterTransfer" filterable placeholder="请选择">
              <el-option
                v-for="item in UrlParameterTransferList"
                :key="item.datasourceId"
                :label="item.apiname"
                :value="item.urlValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="接口说明:">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 50}"
              placeholder="请输入内容"
              v-model="InterfaceAddFrom.remark">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">{{messageView.sumit}}</el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
    </el-form>
  </div>
</template>
  
  <script>
  import { findAllList, parameterTypeGet,requsetMethodTypeGet,findtestEnvironmentSelectListGet,addInterfacePost,deleteInterfacePost,getDetail,updateInterface,exportInterface} from '@/api/automation/interface'
  export default {
    name: "InterfaceFrom",
    data() {
      return {
        isAdd: true,
        isAddMessage: { sumit: "新增" },
        noAddMessage: { sumit: "编辑" },
        messageView: {},
        parameterType:[],
        requsetMethod:[],
        testEnvironmentSelectList:[],
        UrlParameterTransferList:[
          {
            "datasourceId":1,
            "apiname":"不传",
            "urlValue":0
          },
          {
            "datasourceId":1,
            "apiname":"传",
            "urlValue":1
          }
        ],
        InterfaceAddFrom: {},
        interfaceId:"",
        interfaceName:"",
        parameterType: "",
        requsetMethod: "",
        requestPath: "",
        testingEnvironment: "",
        urlParameterTransfer:"",

        rules: {
          interfaceName: [
            { required: true, message: "请输入接口名称", trigger: "blur" },
          ],
          parameterType: [
            { required: true, message: "请选择参数类型", trigger: "change" },
          ],
          requsetMethod: [
            { required: true, message: "请选择请求方式", trigger: "change" },
          ],
          requestPath: [
            { required: true, message: "请输入请求路径", trigger: "blur" },
          ],
          testingEnvironment: [
            { required: true, message: "请选择测试环境", trigger: "change" },
          ],
          urlParameterTransfer: [
            { required: true, message: "请选择URL传参", trigger: "change" },
          ],
        }
      };
    },
    methods: {
      //获取参数类型
      findAllparameterType(){
        parameterTypeGet().then(resp=>{
            this.parameterType=resp.data;
        })
      },
      //请求方式
      findAllrequsetMethod(){
        requsetMethodTypeGet().then(resp=>{
            this.requsetMethod=resp.data;
        })
      },
      //获取测试环境
      findtestEnvironmentSelectList(){
        findtestEnvironmentSelectListGet().then(resp=>{
            this.testEnvironmentSelectList=resp.data;
        })
      },
      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.isAdd) {
              addInterfacePost(this.InterfaceAddFrom).then(resp=>{
                this.$message({
                          message: resp.msg,
                          type: 'success'
                        });
                this.$router.push("/automation/Interface");        
              })              
            } else {
              this.scheduledUpdateTrue();
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      onCancel() {
        this.ScheduledAdd = {};
        this.$router.push("/automation/Interface");
      },
      detail(interfaceId){
        getDetail(interfaceId).then(resp=>{
            this.InterfaceAddFrom=resp.data;
        })
      },
      scheduledUpdateTrue(){
        updateInterface(this.InterfaceAddFrom).then(resp=>{
            this.$message({
                      message: resp.msg,
                      type: 'success'
                    });
            this.$router.push("/automation/Interface");        
        })
      }
    },
    created() {
      this.$router.onReady(() => {
        this.isAdd = this.$route.query.isAdd;
        this.interfaceId = this.$route.query.interfaceId;
      });
      this.findAllparameterType();
      this.findAllrequsetMethod();
      this.findtestEnvironmentSelectList();
      if (this.isAdd) {
        this.messageView = this.isAddMessage;
      } else {
        this.messageView = this.noAddMessage;
        this.detail(this.interfaceId);
      }
    },
  };
</script>
  
  <style scoped>
.line {
  text-align: center;
}
</style>
  
  